<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="miqiweiying">
    <Transition name="animate-zoomIn">
      <h1 v-show="show" class="line-center-title">
        米奇微影
      </h1>
    </Transition>
    <div class="content">
      <Transition name="animate-fadeInLeft">
        <div v-show="show" class="flex space-x-[50px]">
          <div class="flex flex-col items-center py-[36px]">
            <span
              class="text-[18px] text-666 font-medium leading-[36px]">创立于2019年，专注于互联网与应用端技术的自主研发，提供一站式影票服务解决方案。目前平台已支持1万多家影城，覆盖全国95%以上影院。系统灵活为企业客户提供全场景在线购票SaaS云服务；多元化的电影福利、娱乐营销玩法精准投放；为电影片方提供宣传发行服务，为大众观影消费者匹配各方电影院资源，提供优质、低价、稳定的电影购票平台。</span>
            <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/image-19.png" alt="">
          </div>
          <img class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-18.png" alt="">
        </div>
      </Transition>
      <Transition name="animate-fadeInRight">
        <span v-show="show" class="text-[24px] font-bold text-center">丰富用户服务场景为互联网流量平台提供专业电影SaaS服务</span>
      </Transition>
      <Transition name="animate-bounceInUp">
        <img v-show="show" class="logos" src="https://public-oss-file.zmaxfilm.com/website-compress/image-20.png" alt="">
      </Transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.miqiweiying {
  padding-top: 50px;
  padding-bottom: 80px;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    gap: 48px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: 45px;
    flex-direction: column;

    .logo {
      width: 172px;
      height: 52px;
      margin-top: 46px;
    }

    .img {
      width: 530px;
      height: 400px;
      flex-shrink: 0;
    }

    .logos {
      width: 387px;
      height: 120px;
      margin: 0 auto;
    }
  }
}
</style>
